<!--
 * @Author: dongxueting
 * @Date: 2023-05-18 16:20:47
 * @LastEditTime: 2023-12-21 16:32:11
 * @email: dong_xt@reachauto.com
 * @Description: 
-->
<template>
  <div :style="{ height: '100%', width: '100%' }" />
</template>

<script>
import * as echarts from "echarts";
import resize from "./mixins/resize";
import { DEFAULT_THEME } from "./setting";
const defaultTheme = DEFAULT_THEME || null;
let chart = {};
export default {
  name: "BaseCharts",
  mixins: [resize],
  props: {
    baseChartsData: {
      type: Object,
      required: true,
    },
    theme: {
      type: String,
      required: false,
      default: undefined,
    },
    graphKey: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      selfTheme: null,
      baseOption: {},
      chart: null,
    };
  },
  watch: {
    baseChartsData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
  },
  mounted() {
    // this.chart = this.initChart();
    this.initChart();
  },
  beforeDestroy() {
    this.destroyChart();
  },
  methods: {
    initChart(theme, option = null) {
      if (!theme) {
        theme = this.$store.state.themeMode;
      }
      chart[this.graphKey] = echarts.init(this.$el, theme);
      chart[this.graphKey].on("dataZoom", (e) => {
        this.$emit("dataZoom", e);
      });
      var zr = chart[this.graphKey].getZr();
      zr.on("click", (params) => {
        const point = [params.offsetX, params.offsetY];
        if (chart[this.graphKey].containPixel({ seriesIndex: 0 }, point)) {
          const xValue =
            chart[this.graphKey].getOption().xAxis[0].axisPointer.value;
            console.log(chart[this.graphKey].getOption(),"chart[this.graphKey].getOption()")
          this.$emit("dataClick", xValue);
        }
      });
      // return chart
    },
    reInitChart(theme = "light") {
      this.destroyChart();
      // this.chart = this.initChart(theme)
      this.initChart();
    },
    destroyChart() {
      if (!chart[this.graphKey]) return;
      chart[this.graphKey].dispose();
      chart[this.graphKey] = null;
    },
    setOptions(value, notMerge = true) {
      chart[this.graphKey] &&
        chart[this.graphKey].setOption(value, { notMerge });
    },
    getChart() {
      return chart[this.graphKey];
    },
  },
};
</script>
